<template>
  <el-dialog
    @close="close"
    title="正在支付"
    :visible.sync="payQrShow"
    append-to-body
    :close-on-click-modal="false"
    width="620px"
  >
    <div class="content" v-if="isHuifu!=2&&payway==2">
      <iframe
        :srcdoc="payForm"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="no"
        width="200"
        height="200"
        style="overflow: hidden"
        v-if="payQrShow"
      >
      </iframe>
      
    </div>
    <div class="wx flex" v-if="payway==1">
      <img src="https://imgage.maimaihao.com/yuduhulian/erp/static/icon/wxlogo.png" alt="">
      <strong>微信支付</strong>
    </div>
    <div class="wx flex" v-if="isHuifu==2&&payway==2">
      <img src="https://imgage.maimaihao.com/yuduhulian/erp/static/icon/zfblogo.png" alt="">
      <strong>支付宝</strong>
    </div>
    <div class="wxcode" ref="qrcode" v-if="(isHuifu==2&&(payway==1||payway==2))||(isHuifu!=2&&payway==1)"></div>
    <div class="tip" style="margin-top: 10px" v-if="payway!=3">
      <p>扫描上方二维码进行支付!</p>
      我已完成支付，<span class="link" @click="checkOrder">点击刷新</span>
    </div>
    <div class="tip" style="margin-top: 10px" v-if="payway==3">
      <p>正在处理中，请稍后...</p>
    </div>
    <!-- <div class="content">
      <iframe
        :srcdoc="payForm"
        frameborder="no"
        border="0"
        marginwidth="0"
        marginheight="0"
        scrolling="no"
        width="200"
        height="200"
        style="overflow: hidden"
      >
      </iframe>
      
    </div>
    <div class="tip" style="margin-top: 10px">
      <p>扫描上方支付宝收款二维码,充值虞豆成功后,立即到账!</p>
      我已完成支付，<span class="link" @click="checkOrder">点击刷新</span>
    </div> -->
    <paySuccess ref="paySuccess" @init="init"></paySuccess>
  </el-dialog>
</template>

<script>
import myMoneyApi from "@/api/financeCenter/myMoney.js";
import paySuccess from "./success.vue"
import QRCode from "qrcodejs2";
export default {
  name: "",
  components:{paySuccess},
  data() {
    return {
      payQrShow: false,
      loading: false,
      orderId: "",
      payForm: "",
      timer: null,
      payway:'',
      qrcode:null,
      successTip:'',
      successTit:'',

      isHuifu:''
    };
  },
  created() {},
  methods: {
    init() {
      this.$emit('init')
    },
    open(payway, payForm,isHuifu) {
      this.isHuifu = isHuifu
      this.payway = payway
      this.loading = false;
      this.payQrShow = true;
      this.payForm = payForm;

      if((this.isHuifu==2&&(this.payway==1||this.payway==2))||(this.isHuifu!=2&&this.payway==1)){
        this.openQRCode()
      }
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.checkOrderInterval();
      }, 2000);
    },
    // 生成二维码
    openQRCode() {
      this.$nextTick(() => {
        this.$refs.qrcode.innerHTML = ''; //清空标签内原有数据，防止多次点击生成多个二维码
          new QRCode(this.$refs.qrcode, {
            text: this.payForm,
            width: 200,
            height: 200,
            colorDark: "#333333", //二维码颜色
            colorLight: "#ffffff", //二维码背景色
          });
      });
    },
    // 轮询订单支付状态
    checkOrderInterval() {
      this.$emit('checkOrderInterval')
    },
    // 结束轮询
    endInterval(){
      clearInterval(this.timer);
    },
    checkOrder() {
      // 主动查询订单支付状态
      this.$emit('checkOrder')
    },
    // 成功
    showSuccess(successTit,successTip,reload=false){
      this.$refs.paySuccess.open(successTit,successTip,reload)
    },
    // 关闭
    close(formName) {
      this.payQrShow = false
      clearInterval(this.timer);
      this.$emit("close");
    },
  },
};
</script>
<style scoped lang="scss">
.content{
  width: 205px;
  margin: 0 auto;
}
.tip{
  width: 280px;
  margin: 0 auto;
  text-align: center;
  color: $yellow;
}
.wx {
  
  line-height: 50px;
  font-size: 20px;
  justify-content: center;
  margin-bottom: 10px;

  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
}
.wxcode{
  width: 200px;
  margin: 0 auto;
}
#code{
  width: 200px;
  margin: 0 auto;
}
</style>
